<!--
 * @Descripttion:试卷回答详情
 * @version:
 * @Author: ada.wu
 * @Date:2024-03-11 11:26:44
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-08 14:24:03
-->
<template>
  <div class="hub">
    <div class="linear_bg"></div>
    <van-cell-group inset class="m-t">
      <van-cell v-for="(item,index) in examList" :key="index" class="list-item">
        <template #title>
          {{index+1}}.{{item.examSubjectName}}({{item.ansValue}})
        </template>
      </van-cell>
    </van-cell-group>
    <div class="m radius bg-white">
      <van-empty v-if="examList.length==0&&!isQuery" description="暂无查询结果…" :image="getAssets('empty.svg')" />
    </div>
  </div>
</template>
<script lang="ts">
import { onMounted, reactive, toRefs, nextTick } from "vue";
import { useRoute } from "vue-router";
import { getNewObj } from "/@/util";
import { examAnswerDetail } from "/@/api/ExamApi";
import { useStore } from "/@/store";

export default {
  components: {},
  setup() {
    const store = useStore();

    const route = useRoute();
    let { examId = "", evaluateId = "" } = route.query;
    const state = reactive({
      isQuery: false,

      queryParam: {
        examId, //试卷ID不能为空
        evaluateId, //评价关系ID不能为空
      },
      examList: <any>[],
    });
    onMounted(() => {
      nextTick(() => {
        getExamAnswerDetail();
      });
    });

    const getExamAnswerDetail = () => {
      state.isQuery = true;
      let { queryParam } = getNewObj(state);
      examAnswerDetail({
        ...queryParam,
      })
        .then((res: any) => {
          if (res) {
            console.log("list===", res.list);
            let examList = res.list || [];
            if (examList && examList.length) {
              examList.forEach((item: any, index: any) => {
                try {
                  item.examSubjectValue = item.examSubjectValue
                    ? JSON.parse(item.examSubjectValue)
                    : [];

                  let obj = item.examSubjectValue.find(
                    (el: any) => el.optionValue == item.ansValue
                  );
                  if (obj) item.ansValue = obj.optionText;
                } catch (error) {}
                setTimeout(() => {
                  console.log(index, item);
                  state.examList.push(item);
                }, 200 * index);
              });
            }
          } else {
            state.examList = [];
          }
        })
        .catch(() => {})
        .finally(() => {});
    };

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.list-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.list-item {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

::v-deep(.van-cell) {
  align-items: center;
}

::v-deep(.van-cell__title) {
  font-weight: 400;
  font-size: 14px;
  color: #616161;
}

::v-deep(.van-cell:after) {
  border: none;
}
::v-deep(.van-field) {
  border-radius: 5px;
  border: 1px solid $bs-color;
}
</style>
